<template>
  <app-layout title="首页">
    <div class="calendar-container p-2">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="4">
          <div class="grid-content">
            <el-button @click="selectAll" plain style="width: 100%;margin-bottom: 0.5rem;">查看所有</el-button>
            <el-tree :data="roomTree" @node-click="handleroom" node-key="id" :default-expanded-keys="defaultExpanded" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="20">
          <div class="grid-content" ref="caledar">
            <el-calendar ref="calendar" v-model="value">
              <template #dateCell="{ data }">
                <div
                  class="date-item"
                  :class="data.isSelected ? 'is-selected' : ''"
                  @click="handleDate(data)"
                >
                  <div class="date-value">{{ data.day.split("-")[2]}}</div>
                  <div class="date-count"
                    v-if="orders.filter((item) => item.order_date === data.day).length > 0"
                  >
                      <div style="background-color: #fdf6ec;color:#e6a23c; padding: 2px 4px">{{orders.filter((item) => item.order_date === data.day)[0].orders?.length}}</div>
                  </div>
                </div>
              </template>
            </el-calendar>
          </div>
        </el-col>
      </el-row>
    </div>
    <create-order
      :date="date"
      :roomList="groups"
      :dialogFormVisible="dialogFormVisible"
      @closeDialog="closeDialog"
    />
  </app-layout>
</template>

<script>
import AppLayout from "@/Layouts/AppLayout.vue";
import CreateOrder from "@/Pages/Booking/CreateOrder.vue";
import { reactive, ref, watch, onMounted } from "vue";
import { Inertia } from "@inertiajs/inertia";

export default {
  name: "Calendar",
  components: {
    AppLayout,
    CreateOrder,
  },
  props: ["orders", "groups"],
  setup(props) {
    const caledar = ref(null);
    let currentYear = window.route().params.month?ref(parseInt(window.route().params.month.split('-')[0])): ref(new Date().getFullYear())
    let currentMonth = window.route().params.month?ref(parseInt(window.route().params.month.split('-')[1])): ref(new Date().getMonth() + 1);
    let dialogFormVisible = ref(false);
    let defaultExpanded = reactive([]);
    defaultExpanded.push(window.route().params.room||window.route().params.group||"")
    let isRoom = ref(false);
    let roomTree = reactive([]);
    let date = ref("");
    props.groups.forEach((group) => {
      const gro = JSON.parse(JSON.stringify(group));
      gro.label = gro.name;
      gro.children = gro.rooms;
      gro.children.forEach((room) => {
        room.label = room.name;
      });
      roomTree.push(gro);
    });
    const closeDialog = () => {
      dialogFormVisible.value = false;
    };
    const handleOpen = (key, keyPath) => {
      console.log(key, keyPath);
    };
    const handleClose = (key, keyPath) => {
      console.log(key, keyPath);
    };
    const handleDate = (d) => {
      dialogFormVisible.value = true;
      date.value = d.day;
    };
    const getOrders = (id = '') => {
      if(id){
        if(isRoom.value) {
          Inertia.get(`/dashboard?month=${currentYear.value}-${currentMonth.value}&&room=${id}`)
        }else{
          Inertia.get(`/dashboard?month=${currentYear.value}-${currentMonth.value}&&group=${id}`)
        }
      }else{
        Inertia.get(`/dashboard?month=${currentYear.value}-${currentMonth.value}`)
      }
    }
    const month = window.route().params.month
    console.log(month + "-"+new Date().getDate());
    let difTime = month? new Date(month+"-"+new Date().getDate()) : new Date()
    const value = ref(difTime);
    const handleroom = (msg) => {
      if(msg.group_id){
        isRoom.value = true;
      }else{
        isRoom.value = false;
      }
      console.log(msg)
      getOrders(msg.id)
    };
    const selectAll = () => {
      Inertia.get(`/dashboard`)
    }
    onMounted(() => {
      caledar._value.addEventListener("click", (e) => {
        if (e.target.tagName === "SPAN") {
          if (e.target.innerHTML === "下个月") {
            if (currentMonth.value === 12) {
              currentMonth.value = 1;
              currentYear.value = currentYear.value + 1;
            }else{
              currentMonth.value = currentMonth.value + 1;
            }
          }
          if (e.target.innerHTML === "上个月") {
            if (currentMonth.value === 1) {
              currentMonth.value = 12;
              currentYear.value = currentYear.value - 1;
            }else{
              currentMonth.value--
            }
          }
          if (e.target.innerHTML === "今天") {
            if (currentMonth.value === 1) {
              currentMonth.value = new Date()
                .toLocaleDateString()
                .split("/")[1];
              currentYear.value = new Date().toLocaleDateString().split("/")[0];
            }
          }
          getOrders()
        }
        if (e.target.tagName === "BUTTON") {
          if (e.target.children[0].innerHTML === "下个月") {
            if (currentMonth.value === 12) {
              currentMonth.value = 1;
              currentYear.value = currentYear.value + 1;
            }else{
              currentMonth.value = currentMonth.value + 1;
            }
          }
          if (e.target.children[0].innerHTML === "上个月") {
            if (currentMonth.value === 1) {
              currentMonth.value = 12;
              currentYear.value = currentYear.value - 1;
            }else{
              currentMonth.value--
            }
          }
          if (e.target.children[0].innerHTML === "今天") {
            if (currentMonth.value === 1) {
              currentMonth.value = new Date()
                .toLocaleDateString()
                .split("/")[1];
              currentYear.value = new Date().toLocaleDateString().split("/")[0];
            }
          }
          getOrders()
        }
      });
    });
    return {
      caledar,
      roomTree,
      dialogFormVisible,
      date,
      defaultExpanded,
      currentYear,
      currentMonth,
      selectAll,
      handleroom,
      handleOpen,
      handleClose,
      handleDate,
      closeDialog,
      getOrders,
      value
    };
  },
};
</script>

<style>
.el-tree-node__content {
  line-height: 40px;
  font-size: 16px;
    height: 40px;
}
.el-tree-node__label {
  font-size: 16px;
}
.date-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.date-item .date-value{
    flex-basis: 100%;
    text-align: center;
}
.el-tree-node__content>.el-tree-node__expand-icon{
    margin: 6px 16px;
}

</style>
